@use "sass:map";
@use "./common/var.scss" as *;
@use "./mixins/input.scss" as *;

$width: 280px;
$height: 36px;

.th-input {
  border: 1px solid $color_primary;
  border-radius: 5px;
  overflow: hidden;
  display: inline-block;
  .input {
    height: $height;
    line-height: $height;
    font-size: 20px;
    text-indent: 10px;
    color: $color_primary;
    @include clear;
    &::placeholder {
      color: map.get($border-colors, primary);
      font-size: 14px;
      font-style: italic;
    }
  }

  .th-input__text,
  .th-input__email,
  .th-input__number,
  .th-input__search {
    min-width: $width;
    width: 100%;
  }
  .th-input__date,
  .th-input__datetime-local,
  .th-input__month,
  .th-input__time {
    width: $width;
  }
  // color
  .th-input__color {
    width: 64px;
    height: $height;
  }
  // number
  .th-input__number {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .number__btn {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .up__btn,
      .down__btn {
        @include clear;
        background-color: #fff;
        width: 18px;
        height: 18px;
        color: $color_primary;
        cursor: pointer;
        &:hover {
          color: map.get($border-colors, primary);
        }
      }
    }
  }
  // search
  .th-input__search {
    display: flex;
    align-items: center;
    input {
      flex: 1;
    }
    .icon {
      width: 26px;
      font-size: 22px;
      color: $color_primary;
      cursor: pointer;
      &:hover {
        color: map.get($border-colors, primary);
      }
    }
  }
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
  -webkit-appearance: none;
}
